<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">
<head>
	<meta charset="utf-8">
	<title>4个SVG具名元素</title>
	<script src="../static/js/echarts.js"></script>
	<!-- <script src="../static/js/echarts.min.js"></script> -->
</head>
<body style="height: 100%; margin: 0">
	<div id="container" style="height: 100%"></div>
</body>
<script type="text/javascript">
var dom = document.getElementById('container');
var myChart = echarts.init(dom, null, {
	renderer: 'canvas',
	useDirtyRect: false
});
var option;

var svg = `<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.2" fill-rule="evenodd" xml:space="preserve" viewBox="-180 0 610 300">
    <g name="name_a">
        <path d="M 0,0 L 0,100 100,100 100,0 Z" fill="#765" />
        <path d="M 150,0 L 150,100 250,100 250,0 Z" fill="#765" />
    </g>
    <path name="name_b" d="M -80,200 L -80,300 20,300 20,200 Z" fill="#567" />
    <path name="name_b" d="M 230,200 L 230,300 330,300 330,200 Z" fill="#567" />
</svg>
`;

echarts.registerMap('simple_svg', { svg: svg });
option = {
	geo: {
		map: 'simple_svg',
		selectedMode: 'multiple',
		regions: [
			{
				name: 'name_a',
				label: {
					formatter: [
						'This two rects are wrapped in a <g name="...">',
						'So a single label is displayed in the center',
						'of the bounding rect of the <g>'
					].join('\n'),
					backgroundColor: 'rgba(0,0,0,0.2)',
					padding: 5
				}
			},
			{
				name: 'name_b',
				label: {
					formatter: [
						'This two rects are named',
						'with the same name.',
						'So each of them has a label.'
					].join('\n'),
					backgroundColor: 'rgba(0,0,0,0.2)',
					padding: 5
				}
			}
		]
	}
};
myChart.setOption(option);

myChart.on('geoselectchanged', function (params) {
	console.log(params);
});

// 事件：可以用如下方式监听具名元素的鼠标事件或者触摸事件：
// 'name_b' 是一个 SVG 元素的名字。
myChart.on('click', { geoIndex: 0, name: 'name_b' }, function (params) {
    console.log("点击事件：", params);
});

// if (option && typeof option === 'object') {
// 	myChart.setOption(option);
// }
// window.addEventListener('resize', myChart.resize);
</script>
</html>